import React from 'react';
import './vertical_1.css';

class Vertical_1 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            eid:props.eid,
            topArrowWidth:'',
            maxWidth:''
        }
        this.rdCss=this.rdCss.bind(this);
        this.updateData=this.updateData.bind(this);
    }

    rdCss() {
        var obj = arguments[0];
        var options = arguments[1];
        if (!!obj === false || typeof options === 'undefined') {
            return null;
        }
        if (typeof options === 'string') {
            let res = document.defaultView.getComputedStyle(obj, null)[options];
            res = Number(res.replace('px', ''));
            return res;
        }
        if (typeof options === 'object') {
            for (var i in options) {
                obj.style[i] = options[i];
            }
        }
    }
    updateData(){
        const {datainfo} =this.props;
        const {eid}=this.state;
        let maxWidth=0;
        if(datainfo!=null&&datainfo.length>0) {
            datainfo.map((item, i) => {
                let timelineDivClass=".timeline-vertical-1-"+eid+" #num_"+i;
                let timelineDiv=document.querySelector(timelineDivClass);
                let timelineWidth=parseInt(Number(this.rdCss(timelineDiv, 'width')))+12;
                let itemWidth = timelineWidth;
                itemWidth > maxWidth ? maxWidth = itemWidth : '';

            })
        }
        this.setState({maxWidth:maxWidth});
    }

    componentDidMount(){
        const {eid}=this.state;
        let arrowDiv=".timeline-vertical-1-"+eid+" #num_0";
        var domTest=document.querySelector(arrowDiv);
        var width=Number(this.rdCss(domTest, 'width'));
        this.setState({topArrowWidth:width});
       this.updateData();
    }

    componentDidUpdate(){
        const {eid}=this.state;
        let arrowDiv=".timeline-vertical-1-"+eid+" #num_0";
        var domTest=document.querySelector(arrowDiv);
        var width=Number(this.rdCss(domTest, 'width'));

        const {datainfo} =this.props;
        let maxWidth=0;
        let timelineWidth=0;
        if(datainfo!=null&&datainfo.length>0) {
            datainfo.map((item, i) => {
                let timelineDivClass=".timeline-vertical-1-"+eid+" #num_"+i;
                let timelineDiv=document.querySelector(timelineDivClass);
                timelineWidth=parseInt(Number(this.rdCss(timelineDiv, 'width')))+12;
                let itemWidth = timelineWidth;
                itemWidth > maxWidth ? maxWidth = itemWidth : '';
            })
        }
        let arrowDivClass=".arrow_0_"+eid;
        document.styleSheets[0].addRule(arrowDivClass,'width:'+(parseInt(width)+12)+'px');
        document.styleSheets[0].addRule(arrowDivClass,'border-left-width:'+(parseInt(width)+12)/2+'px !important');
        document.styleSheets[0].addRule(arrowDivClass,'border-right-width:'+(parseInt(width)+12)/2+'px !important');

    }

    render(){
        const {datainfo} =this.props;
        const {eid,topArrowWidth}=this.state
        let {maxWidth}=this.state;

        maxWidth<70?maxWidth=70:'';
        maxWidth>195?maxWidth=195:''

        let beforeName=".timeline-vertical-1-"+eid+"::before"
        document.styleSheets[0].addRule(beforeName,'left:'+(parseInt(maxWidth)+20)+'px');

        let div1style={width:'30px',height:'30px',display:'inline-block'}
        let timeLineContentStyle={margin:'1em 0',borderRadius:'5px'}
        let arrowStyle={borderBottomWidth:'10px',height:'0px',borderStyle:'solid',borderColor:'transparent transparent #01743f'}
        return<div>
                {datainfo.length>0?
                    <div id="timeline-vertical-1" class={"container-vertical-1 timeline-vertical-1 timeline-vertical-1-"+eid }>
                    {
                        datainfo.map((item,i)=>{

                            let timelineDivClass="timeline-vertical-1 #num_"+i;
                            let timelineDiv=document.querySelector(timelineDivClass);
                            let timelineWidth=Number(this.rdCss(timelineDiv, 'width'));

                            timelineWidth=parseInt(timelineWidth)+12;
                        if(parseInt(timelineWidth)>195){
                            timelineWidth=195
                        }
                        let arrowStyle={}
                        let div2style2={maxWidth:'195px',height:'20px',display:'inline-block',fontSize:'12px',position:'absolute',background:'#B5B5B5',lineHeight:'20px',color:'#ffffff',textAlign:'center',whiteSpace:'nowrap',overflow:'hidden',paddingLeft:'6px',paddingRight:'6px',textOverflow:'ellipsis',position:'relative',float:'right'}
                        let div2style={maxWidth:'195px',height:'20px',display:'inline-block',fontSize:'12px',position:'absolute',background:'#B5B5B5',lineHeight:'20px',color:'#ffffff',textAlign:'center',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',paddingLeft:'6px',paddingRight:'6px',position:'relative',float:'right'}
                        if(i==0){
                            timelineWidth=parseInt(topArrowWidth)+12;
                            if(parseInt(timelineWidth)>195){
                                timelineWidth=195
                            }
                            arrowStyle={width:'0px',position:'relative',float:'right'}

                        }
                        let div3Style={left:parseInt(maxWidth)-1,width:'1px',top:'-18px'}
                        let div3Style1={left:parseInt(maxWidth)-parseInt(timelineWidth),width:timelineWidth}

                        let contentdata=item.content;
                        let contentArr=contentdata.split(/\n/g);
                        return i==0?
                            <div class="timeline-content-vertical-1">
                                <div class="timeline-img-vertical-1" style={{left:parseInt(maxWidth)+30}}>
                                </div>
                                <div class="timeline-dateinfo-vertical-1" style={div3Style}>
                                    <div  id={'arrow_'+i} className={'arrow_'+i+'_'+eid} style={arrowStyle}></div>
                                    <div id={'num_'+i}  style={div2style2} title={item.timeline}>{item.timeline}</div>
                                </div>
                                <div class="timeline-content" style={{left:parseInt(maxWidth)-55,width:'calc(91% - '+maxWidth+'px)'}}>
                                    <div className={"content-vertical-1 content-"+i} >
                                        <div >
                                            {
                                                contentArr.map((item,i)=>{
                                                    if(item==""){
                                                        return <span style={{display:'block',height:'20px'}}></span>
                                                    }
                                                    return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                                })
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                            : <div class="timeline-content-vertical-1">
                                <div class="timeline-img-vertical-1" style={{left:parseInt(maxWidth)+30}}>
                                </div>
                                <div class="timeline-dateinfo-vertical-1"  style={div3Style1}>
                                    <div  id={'arrow_'+i}></div>
                                    <div id={'num_'+i}  style={div2style} title={item.timeline}>{item.timeline}</div>
                                </div>
                            <div class="timeline-content" style={{left:parseInt(maxWidth)-55,width:'calc(91% - '+maxWidth+'px)'}}>
                                <div className="content-vertical-1" >
                                    <div >
                                        {
                                            contentArr.map((item,i)=>{
                                                if(item==""){
                                                    return <span style={{display:'block',height:'20px'}}></span>
                                                }
                                                return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                            })
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                })

    }

    </div>
    :
    <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
    }
    </div>
    }
}

export default Vertical_1;